<template>
	<view class="d-flex a-start">
		<view :id="col" class="column" :class="{'m-left20': i}" v-for="(col,i) in ['leftColumn','rightColumn']" :key="i">
			<view class="m-bot20" v-for="(item,index) in lists[i]" :key="index" @click="$pop.artDetails(item)">
				<image :src="$imgUrls(item.website_article_img)" mode="widthFix" lazy-load class="bor_radius_10" v-if="item.website_article_img"></image>
				<image :src="$imgUrls(item.atlasArr[0])" mode="widthFix" lazy-load class="bor_radius_10" v-else-if="item.atlasArr"></image>
				<view class="padding10">
					<view class="size30 ellipsis_2 m-bot10">{{ item.website_article_title }}</view>
					<view class="color_66 ellipsis_2 m-bot10">{{ item.website_article_info }}</view>
					<view class="color_99 m-bot10">
						<text class="m-right20" v-if="item.website_article_views != 0">阅读{{ item.website_article_views }}</text>
						<text class="m-right20" v-if="item.allZan != 0">点赞{{ item.allZan }}</text>
						<text v-if="item.allComment != 0">评论{{ item.allComment }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			value: { // 瀑布流数据
				type: Array,
				required: true,
				default: () => []
			},
			addTime: { // 每次插入数据的事件间隔，单位ms
				type: [Number, String],
				default: 200
			}
		},
		data() {
			return {
				lists: [[],[]],
				tempData: []
			}
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value)
			}
		},
		watch: {
			copyFlowList(nVal, oVal) {
				// 传入的是完整数据，tempData只负责存新增数据
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
				this.tempData = this.tempData.concat(this.cloneData(nVal.slice(startIndex)))
				this.splitData()
			}
		},
		mounted() {
			this.tempData = this.cloneData(this.copyFlowList)
			this.splitData()
		},
		methods: {
			cloneData(data) {
				return JSON.parse(JSON.stringify(data))
			},
			// https://www.uviewui.com/js/getRect.html
			async splitData() {
				if (!this.tempData.length) return
				let leftRect = await this.$uGetRect('#leftColumn')
				let rightRect = await this.$uGetRect('#rightColumn')
				let item = this.tempData[0]
				if (!item) return
				if (leftRect.height < rightRect.height) {
					this.lists[0].push(item)
				} else if (leftRect.height > rightRect.height) {
					this.lists[1].push(item)
				} else { // 高度相同看长度
					if (this.lists[0].length <= this.lists[1].length) {
						this.lists[0].push(item)
					} else {
						this.lists[1].push(item)
					}
				}
				this.tempData.splice(0, 1) // push完即删
				if (this.tempData.length) {
					setTimeout(() => {
						this.splitData()
					}, this.addTime)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.column {
		flex: 1;
		display: flex;
		flex-direction: column; 
		height: auto;
	}
</style>
